<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>     
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>跟踪管理 - 清管管理</title>
	<!--[if lt IE 9]><script src="${resourcePath}js/comm/css3-mediaqueries.js"></script><![endif]-->

    <%--<link rel="stylesheet" type="text/css" href="${resourcePath}css/guandaoqingli/pig.css">--%>
    <style>
        td li{position: relative !important;width:100% !important;height:40px}
    	.jk_00 {
            display: inline-block;
            width: 25px;
            height: 25px;
            vertical-align: -19px;
            background: url("${resourcePath}images/pig/icon_view.png") no-repeat center center;
            left:50%;
            margin-left:-13px !important;
            top:50% ;
            margin-top:-12px;
            position: absolute;
    	}
    	.jk_xq_00 {
    		display: inline-block;
		    width: 28px;
		    height: 28px;
		    margin-right: 5px;
		    vertical-align: middle;
		    background: url("${resourcePath}images/comm/xiangqing.png") no-repeat center center;
    	}
        .download_00 {
            display: inline-block;
            width: 24px;
            height: 24px;
            position:absolute;
            vertical-align: -9px;
            background: url("${resourcePath}images/pig/icon_enclosure.png") no-repeat center center;
            left:50%;
            margin-left:-13px !important;
            top:50% ;
            margin-top:-12px;
            position: absolute;
        }
        .download_00:hover{    border-radius: 50%;
            background:  url("${resourcePath}images/pig/icon_enclosure_white.png") no-repeat center center;}
    	.jk_00:hover{border-radius: 50%;
            background: url("${resourcePath}images/pig/icon_view_white.png") no-repeat center center;}
    	.jk_xq_00:hover{background:url("${resourcePath}images/comm/xiangqing_hover.png") no-repeat center center;}

        #laydate_box{width:243px}
        #laydate_box * {
            box-sizing: content-box !important;
        }
        #laydate_box *::before, #laydate_box *::after {
            box-sizing: content-box  !important;
        }
    </style>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/eqpt/tabPage.js"></script>
</head>
<body class="body-pad" style="padding-bottom:100px;">
	<input type="hidden" id="pagePath" value="${pageContext.request.contextPath}"/>
    <input type="hidden" id="resourcePath" value="${resourcePath}"/>
    <input type="hidden" id="gisResourcePath" value="${gisResourcePath}"/>
    <div class="html-header" style="background-color:white;padding-top:0">
        <p class="header-title" style="margin-top:0"><em class="icon-gzgl1"></em>跟踪管理</p>
    </div>
<div class="container-fluid warp insp-container">
    <div class="row-fluid  bg-white1">
        <div class="main clearFix">
            <div class="cxtj clearFix">
                <div class="fxgl">
                    <p class="fxgl-title">任务名称</p>
                    <div class="sel w320">
                        <input type="text" class="new-input" placeholder="任务名称" id="taskName">
                    </div>
                </div>
                <div class="fxgl">
                    <p class="fxgl-title">管道名称</p>
                    <div class="sel w320">
                        <div class="zy-select-inner">
                            <blockquote id="JQ_pipeline" class="bk-select"><abbr></abbr></blockquote>
                        </div>
                    </div>
                </div>
                <div class="fxgl br">
                    <p class="fxgl-title">管段名称</p>
                    <div class="sel w320">
                        <div class="zy-select-inner">
                            <blockquote id="JQ_segment" class="bk-select"></blockquote>
                        </div>
                    </div>
                </div>
                <div class="fxgl">
                    <p class="fxgl-title">起点位置</p>
                    <div class="sel w320">
                        <div class="zy-select-inner">
                            <blockquote id="JQ_begin" class="bk-select"></blockquote>
                        </div>
                    </div>
                </div>
                <div class="fxgl">
                    <p class="fxgl-title">终点位置</p>
                    <div class="sel w320">
                        <div class="zy-select-inner">
                            <blockquote id="JQ_end" class="bk-select"></blockquote>
                        </div>
                    </div>
                </div>
                <div class="fxgl br">
                    <p class="fxgl-title">清管类型</p>
                    <div class="sel w320">
                        <div class="dropdown-list">
                            <div class="drop-list drop-list-min">
                                <div class="checked" id="toolDiv">
                                    <a href="javascript:void(0);" id="qggj">清管类型</a>
                                </div>
                                <span class="down-span"></span>
                            </div>
                            <ul class="select select-min none">
                                <c:forEach items="${requestScope.sCode}" var="sCode">
                                    <c:if test="${sCode.level == 1}">
                                        <li><a href="javascript:void(0);" id="${sCode.id }" >${sCode.shortName}</a></li>
                                    </c:if>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="fxgl">
                    <div class="new-sel ">
                        <p class="fxgl-title">清管时间</p>
                        <div class="sel w320" style="position:relative">
                            <input type="text" class="new-input" id="begTime" onclick="laydate({elem: '#begTime', format: 'YYYY-MM-DD'})">
                            <em class="time-icon" onclick="laydate({elem: '#begTime', format: 'YYYY-MM-DD'})"></em>
                        </div>
                    </div>
                    <div class="fg-1">-</div>
                    <div class="new-sel ">
                        <p class="fxgl-title"style="color:white">ioio</p>
                        <div class="sel w320" style="position:relative">
                            <input type="text" class="new-input" id="endTime" onclick="laydate({elem: '#endTime', format: 'YYYY-MM-DD'})">
                            <em class="time-icon" onclick="laydate({elem: '#endTime', format: 'YYYY-MM-DD'})"></em>
                        </div>
                    </div>
                </div>
                <div class="fxgl">
                    <p class="fxgl-title" style="color:white"> </p>
                    <a href="javascript:void(0)" class="btn btn-w130 btn-search-icon btn-h40" style="float:left;margin-top:20px" onclick="searchFun();"><em></em>查询</a>
                </div>
                <div style="clear: both"></div>
                <div class="l-r clearFix pad20" style="margin-top:10px">
                    <div id="trackTable"></div>
                </div>

            </div>
            <%--<div class="se-bt clearFix">--%>
                <%--<div class="sel w305">--%>
                    <%--<i class="d-name">管道名称</i>--%>
                    <%--<div class="dropdown-list">--%>
                        <%--<div class="drop-list drop-list-min">--%>
                            <%--<div class="checked w270" id="lineDiv">--%>
                                <%--<a href="javascript:void(0);" id="gdmc">管道名称</a>--%>
                            <%--</div>--%>
                            <%--<span class="down-span"></span>--%>
                        <%--</div>--%>
                        <%--<ul class="select select-min none" style="width:294px;">--%>
                            <%--<c:forEach items="${requestScope.pipeLine}" var="line">--%>
	                        	<%--<li onclick="getInspSegment('${line.id}')" ><a href="javascript:void(0);" id="${line.id }" >${line.name}</a></li>--%>
	                        <%--</c:forEach>--%>
                        <%--</ul>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="sel w305">--%>
                    <%--<i class="d-name">管段名称</i>--%>
                    <%--<div class="dropdown-list">--%>
                        <%--<div class="drop-list drop-list-min">--%>
                            <%--<div class="checked w270" id="segmentDiv">--%>
                                <%--<a href="javascript:void(0);" id="jcgdmc">管段名称</a>--%>
                            <%--</div>--%>
                            <%--<span class="down-span"></span>--%>
                        <%--</div>--%>
                        <%--<ul class="select select-min none" style="width:294px;" id="inspSegment">--%>
                        <%--</ul>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="sel w305">--%>
                    <%--<i class="d-name">清管类型</i>--%>
                    <%--<div class="dropdown-list">--%>
                        <%--<div class="drop-list drop-list-min">--%>
                            <%--<div class="checked w270" id="toolDiv">--%>
                                <%--<a href="javascript:void(0);" id="qggj">清管类型</a>--%>
                            <%--</div>--%>
                            <%--<span class="down-span"></span>--%>
                        <%--</div>--%>
                        <%--<ul class="select select-min none" style="width:294px;">--%>
                            <%--<c:forEach items="${requestScope.sCode}" var="sCode">--%>
	                        	<%--<li><a href="javascript:void(0);" id="${sCode.id }" >${sCode.shortName}</a></li>--%>
	                        <%--</c:forEach>--%>
                        <%--</ul>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="sel w305">--%>
                    <%--<i class="d-name">实际清管时间</i>--%>
                    <%--<span class="time" style="float:left"><input id="begTime" onclick="laydate({elem: '#begTime', format: 'YYYY-MM-DD'})" class="laydate-icon"/><em onclick="laydate({elem: '#begTime', format: 'YYYY-MM-DD'})"></em></span>--%>
                    <%--<span class="fg">-</span>--%>
                    <%--<span class="time"style="float:left;margin-left:0" ><input id="endTime" onclick="laydate({elem: '#endTime', format: 'YYYY-MM-DD'})" class="laydate-icon"/><em onclick="laydate({elem: '#endTime', format: 'YYYY-MM-DD'})"></em></span>--%>
                <%--</div>--%>
                <%--<div class="fd"></div>--%>
                <%--<div class="sel w305">--%>
                    <%--<i class="d-name">任务名称</i>--%>
                    <%--<input  class="input-w295" type="text" placeholder="任务名称" id="taskName"/>--%>
                    <%--<!--<em class="x-ts">*</em>-->--%>
                <%--</div>--%>
                <%--<a href="javascript:void(0)" class="btn btn-w100 btn-search-icon btn-h30" style="float:left" onclick="searchFun();">查询</a>--%>

            <%--</div>--%>

            
        </div>
    </div>
</div>
<!--导入-->
<div id="dr" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 800px; height: 500px; margin-left: -400px; top: 15%; display: none;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h3 class="PopupTitle" style="text-align:center">导入跟踪记录</h3>
    </div>
    <div class="modal-body">
        <!-- 导入成功-->
        <div class="none">
            <div class="dr-succc">
                <div class="first"><img src="${resourcePath}images/pig/excel.png" alt=""></div>
                <div class="second">跟踪记录</div>
                <div class="third"><img src="${resourcePath}images/pig/wjj.png" alt=""><span>960.36KB</span></div>
                <div class="jdt">
                    <span class="go"></span>
                    <span class="value">100%</span>
                </div>
            </div>
            <div class="dr-list">
                <ul>
                    <li><em class="ok"></em><span>导入跟踪记录成功！</span></li>
                </ul>
            </div>
        </div>
        <!-- 导入失败-->
        <div>
            <div class="dr-succc">
                <div class="first"><img src="${resourcePath}images/pig/excel.png" alt=""></div>
                <div class="second">跟踪记录</div>
                <div class="third"><img src="${resourcePath}images/pig/wjj.png" alt=""><span>960.36KB</span></div>
                <div class="jdt">
                    <span class="go"></span>
                    <span class="value">100%</span>
                </div>
                <em class="cl"></em>
            </div>
            <div class="dr-list">
                <ul>
                    <li><em class="no"></em><span>数据导入失败！共<i>10</i>处错误,下载 <a href="">错误表格</a></span></li>
                </ul>
                <p class="error-info">错误详情</p>
                <div class="no-info">
                    <p>X行X列导入失败，错误代码 ERROR_002。</p>
                    <p>X行X列导入失败，错误代码 ERROR_002。</p>
                    <p>X行X列导入失败，错误代码 ERROR_002。</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ui -->
<script src="<%=request.getContextPath()%>/static/js/ui/ui-main.js"></script>
<script>

    // 管道
    var $pipeline = $('#JQ_pipeline').select3();
    // 管段
    var $segment = $('#JQ_segment').select3({
        title:'管段'
    });
    // 起点位置
    var $begin = $('#JQ_begin').select3({
        title: '起点位置',
        server: true,
        param: {'pipeLineId':$pipeline,'pipeSegmentId':$segment}
    });
    // 终点位置
    var $end = $('#JQ_end').select3({
        title:'终点位置',
        server: true,
        param: {'pipeLineId':$pipeline,'pipeSegmentId':$segment,'beginSignId':$begin}
    });

    // 触发管道
    $pipeline.element.on('select',function(e,v){
        var id = v || $pipeline.val();
        if(id){
            // 管段
            DyyBase.ajax(DyyBase.url_segment(), {pipeLineId:id}, function(dataset){
                var json = DyyBase.getSelect(dataset);
                $segment.add(json);
            });
            // 起点 & 终点
            DyyBase.ajax(DyyBase.url_pipe_pos(), {pipeLineId:id}, function(dataset){
                var begin = DyyBase.getPos(dataset,'begin');
                var end = DyyBase.getPos(dataset,'end');
                $begin.asset(begin);
                $end.asset(end);
            });
        }else{
            $segment.add([]);
            $begin.add([]);
            $end.add([]);
        }
    });
    // 触发管段
    $segment.element.on('select',function(e,v){
        var pipeId = $pipeline.val();
        var id = v || $segment.val();
        if(id){
            // 起点 & 终点
            DyyBase.ajax(DyyBase.url_segment_pos(), {pipeSegmentId:id}, function(dataset){
                var begin = DyyBase.getPos(dataset,'begin');
                var end = DyyBase.getPos(dataset,'end');
                $begin.asset(begin);
                $end.asset(end);
            });
        }else{
            $begin.add([]);
            $end.add([]);
        }
    });

</script>
<script src="${pageContext.request.contextPath}/js/pig/cleanPipeLineTrack.js"></script>

</body>
</html>